<template>
	<view>
		<!-- tab -->
		<view class="tab">
			<view :class="tabindex==0?'active':''" @click="selecttab(0)">预约历史</view>
			<view :class="tabindex==1?'active':''" @click="selecttab(1)">今日预约</view>
			<view :class="tabindex==2?'active':''" @click="selecttab(2)">其他预约</view>
		</view>


		<!-- list -->
		<view class="list" v-for="(item,index) in advancelist" :key="index" @click="todetails(item)">
			<view class="left">
				<image :src="imageurl + item.image" mode=""></image>
			</view>
			<view class="right">
				<view class="top">
					<view class="name">
						{{item.massagistName}}
					</view>
					<view class="complete" v-if="item.orderStatus==3" >
						已完成
					</view>
					<view class="incomplete" v-if="item.orderStatus==1">
						进行中
					</view>
					<view class="cancel" v-if="item.orderStatus==4">
						已取消
					</view>
					<view class="cancel" v-if="item.orderStatus==0">
						已预约
					</view>
					<view class="cancel" v-if="item.orderStatus==2">
						待评价
					</view>
				</view>
				<view class="center">
					时间开始：{{item.estimateStartTime}}
				</view>
				<view class="bottom">
					<view class="">
						项目名称：{{item.projectName}}
					</view>
					<view class="lookdetails">
						查看详情
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabindex: 0,
				page:1,//分页页数
				advancelist:[],
				imageurl:this.$imgurl,
			}
		},
		onLoad() {
			this.advance()
		},
		methods: {
			//店铺预约
			advance(){
				var that = this
				var data = {
					limit: 20,
					page: that.page,
					storeId:0,
				}
				if(that.tabindex==0){
					//预约历史
					that.$http("/api/user/store/getSortHistoryList", 'POST', data).then((res) => {
						console.log('预约历史', res.data.data.list)
						that.advancelist = res.data.data.list
					})
				}else if(that.tabindex==1){
					//今日预约
					that.$http("/api/user/store/getTodaySortList", 'POST', data).then((res) => {
						console.log('今日预约', res.data.data.list)
						that.advancelist = res.data.data.list
					})
				}else if(that.tabindex==2){
					//其他预约
					that.$http("/api/user/store/getOtherSortList", 'POST', data).then((res) => {
						console.log('其他预约', res.data.data.list)
						that.advancelist = res.data.data.list
					})
				}
				
			},
			//查看详情
			todetails(item){
				var data = JSON.stringify(item)
				uni.navigateTo({
					url:"../taskdetails/taskdetails?data=" + data
				})
			},
			//tab切换
			selecttab(index) {
				this.tabindex = index
				this.advance()
			},
		}
	}
</script>

<style lang="scss">
	image{
		width: 100%;
		height: 100%;
	}
	.tab {
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 28rpx;
		padding: 20rpx;
		border-bottom: 1rpx solid #ECECEC;

		.active {
			color: #F39E1C;
		}
	}
	.list{
		padding: 20rpx;
		border-bottom: 1rpx solid #ECECEC;
		display: flex;
		justify-content: space-between;
		.left{
			width: 120rpx;
			height: 120rpx;
		}
		.right{
			flex: 0 0 80%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.top{
				display: flex;
				justify-content: space-between;
				.complete{
					color: rgb(199,199,199);
				}
				.incomplete{
					color: rgb(36,153,255);
				}
				.cancel{
					color: #FF0000;
				}
				.name{
					color: #000000;
					font-size: 30rpx;
				}
			}
			.center{
				color: #ECECEC;
				font-size: 24rpx;
			}
			.bottom{
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.lookdetails{
					width: 120rpx;
					height: 40rpx;
					font-size: 26rpx;
					color: #C8C9CC;
					
				}
			}
		}
	}
</style>
